<template>
    <div class="swipper-container">
      <div class="text-container">
          <h5>首页特惠展示图(最多四张)</h5>
          <input type="text" placeholder="请输入图库中图片的名称" v-model="nowImgName" @blur="completeInput">
          <select v-model="nowGood">
              <optgroup>
                  <option v-for="(item) in goodList" :key="item.goodId" :value="item.goodId">
                      {{ item.goodName }}
                  </option>
              </optgroup>
          </select>
          <span>选择所属的商品</span>
          <img :src="nowUrl"/>
          <button @click="uploadImg">上传</button>
      </div>
      <div class="img-container">
          <div class="img-item" v-for="(item,index) in discountList" :key="item.goodId">
              <div>
                  <img :src="item.bannerName"/>
                  <h5>{{ goodMap[item.goodId]!==undefined?goodMap[item.goodId].goodName:'error' }}</h5>
              </div>
              <div class="delete-img" title="点击删除图片" @click="del(index)"></div>
          </div>
      </div>
      <div class="bottom">
          <button @click="updateJSON">保存</button>
      </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            goodList:[],
            goodMap:{},
            discountList:[],
            nowImgName:'',
            nowGood:'',
            nowUrl: require('@/assets/preview.png'),
        }
    },
    methods:{
        del(index){
            this.$delete(this.discountList,index)
        },
        uploadImg(){
            if(this.discountList.length<4&&this.nowUrl.indexOf('http://')===0){
                this.discountList.push({bannerName:this.nowUrl,goodId:this.nowGood,slot:this.discountList.length})
            }
        },
        completeInput(){
            if(this.nowImgName!='')
                this.nowUrl = this.$http.defaults.baseURL+'/images/'+this.nowImgName
            
        },
        async updateJSON(){
            let {data:res} = await this.$http.post('/saveDiscount',this.discountList.map((item,index)=>{
                return {
                    bannerName:item.bannerName.substring(item.bannerName.lastIndexOf('/')+1),
                    goodId:item.goodId,
                    slot:index
                }
            }))
            if(res=='ok')
             alert('保存完毕')
        }
        
    },
    async created(){
        let {data:good} = await this.$http.get('/getAllGoods')
        this.goodList =good
        this.goodList.forEach(item=>{
            this.goodMap[item.goodId] = item
        })
        let {data:discount} = await this.$http.get('/getDiscountsBanner')
        this.discountList = discount
    },
}
</script>

<style lang="less">
    .swipper-container{
        width: 95%;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #ffffff;
        .bottom{
                margin-top: 50px;
                display: flex;
                justify-content: right;
                width: 100%;
                button{
                    border: 0 solid #ffffff;
                    color: #ffffff;
                    background-color: #bb420e;
                    border-radius: 15px;
                    box-sizing: border-box;
                    padding: 5px 20px;
                }
        }
        .text-container{
                flex: 1;
                margin-bottom: 50px;
                span{
                    margin-left: 10px;
                }
                img{
                    margin-left: 20px;
                }
                select{
                    width: 20%;
                    box-sizing: border-box;
                    padding: 5px 10px;
                    border: 0.5px solid #a2a2a2;
                    border-radius: 7px;
                    margin-left: 20px;
                }
                .warn-tip{
                    margin-left: 10px;
                    text-align: left;
                    color: #C00000;
                    font-weight: bolder;
                }
                h5{
                    margin: 0;
                    font-weight: 900;
                }
                input{
                    box-sizing: border-box;
                    padding: 5px 10px;
                    border: 0.5px solid #a2a2a2;
                    margin: 20px 0;
                    border-radius: 7px;
                }
                button{
                    border: 0 solid #ffffff;
                    margin-left: 10px;
                    box-sizing: border-box;
                    padding: 10px;
                    background-color: #2c2222;
                    border-radius: 5px;
                    color: #ffffff;
                    font-size: 15px;
                }
                button:hover{
                    background-color: #a2a2a2;
                }
            }
            .img-container{
                display: flex;
                align-items: center;
                .img-item{
                    display: flex;
                    img{
                        width: 200px;
                        border-radius: 20px;
                    }
                    h5{
                        text-align: center;
                    }
                    .delete-img{
                        width: 20px;
                        height: 20px;
                        background-image: url(@/assets/close2.png);
                        background-position: 50%;
                        background-size:cover
                    }  
                    .delete-img:hover{
                        background-image: url(@/assets/close1.png);
                        cursor: pointer;
                    }     
                }
                
                margin-right: 10px;
            }
            img{
                width: 150px;
                height: 150px;
                border-radius: 20px;
            }
    }
</style>